<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-11-21 17:13:52
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-10-13 15:42:35
 * @Description:
 *
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <el-input
        v-model="searchKey"
        style="width: 200px; margin-right: 20px"
        size="medium"
        class="input"
        placeholder="请输入关键字进行过滤"
        clearable
        @clear="clearClick"
        @keyup.enter.native="queryClick"
      />
      <el-button
        size="medium"
        type="primary"
        @click="queryClick"
      >查询</el-button>
      <el-button size="medium" @click="resetClick">重置</el-button>
      <el-button
        size="medium"
        style="margin-left: auto"
        type="primary"
        icon="el-icon-plus"
        @click="createClick"
      >导入账号</el-button>
    </MyHeader>
    <MyMain class="main">
      <el-table
        v-loading="loading"
        class="common-table"
        :data="list"
        stripe
        header-cell-class-name="listHeaderCell"
        :header-cell-style="{ color: '#696969' }"
      >
        <el-table-column
          prop="cloudAccountName"
          label="云账号名称"
          min-width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cloudPlatform"
          label="云平台"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="userName"
          label="用户名"
          min-width="120"
          show-overflow-tooltip
        />
        <el-table-column
          prop="serverAddress"
          label="服务器地址"
          min-width="130"
          show-overflow-tooltip
        />
        <el-table-column
          prop="port"
          label="端口"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="region"
          label="区域"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="desc"
          label="描述"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createBy"
          label="创建人"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column prop="createDate" label="创建时间" width="170" />
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              style="height: 22px; line-height: 22px; padding: 0 10px"
              @click="editClick(scope.row)"
            >编辑</el-button>
            <el-popover
              :ref="`popover-delete-${scope.$index}`"
              placement="top"
              width="300"
              style="margin-left: 10px"
            >
              <p>是否确认删除该账号？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="
                    scope._self.$refs[
                      `popover-delete-${scope.$index}`
                    ].doClose()
                  "
                >取消</el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteClick(scope)"
                >确定</el-button>
              </div>
              <el-button
                slot="reference"
                type="danger"
                style="height: 22px; line-height: 22px; padding: 0 10px"
                size="mini"
              >删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 30px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="totalCount"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
    </MyMain>

    <!--创建/编辑-->
    <el-dialog
      v-if="showDialog"
      class="create-dialog"
      :title="dialogType === 1 ? '导入私有云账号' : '编辑私有云账号'"
      :visible="showDialog"
      width="40vw"
      top="12vh"
      :close-on-click-modal="false"
      @close="showDialog = false"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        size="medium"
        label-width="auto"
      >
        <el-form-item
          class="item"
          label="云平台"
          prop="cloudPlatform"
        >
          <el-select
            v-model="form.cloudPlatform"
            placeholder="请选择云平台"
            style="width: 100%"
            :disabled="dialogType === 2"
          >
            <el-option
              v-for="item in cloudPlatformOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="item right"
          label="云账号名称"
          prop="cloudAccountName"
        >
          <el-input
            v-model="form.cloudAccountName"
            placeholder="请输入云账户名称"
            :disabled="dialogType === 2"
          />
        </el-form-item>
        <el-form-item
          v-if="dialogType === 1"
          class="item"
          label="用户名"
          prop="userName"
        >
          <el-input v-model="form.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item
          v-if="dialogType === 1"
          class="item right"
          label="密码"
          prop="pwd"
        >
          <el-input v-model="form.pwd" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item label="服务器地址" prop="serverAddress">
          <el-input
            v-model="form.serverAddress"
            placeholder="请输入服务器地址"
          />
        </el-form-item>
        <el-form-item
          class="item"
          label="端口"
          prop="port"
        >
          <el-input v-model="form.port" placeholder="请输入端口" />
        </el-form-item>
        <el-form-item
          class="item right"
          label="用户域"
          prop="domain"
        >
          <el-input v-model="form.domain" placeholder="请输入用户域" />
        </el-form-item>
        <template v-if="form.cloudPlatform === '浪潮InCloud'">
          <el-form-item
            v-if="dialogType === 1"
            class="item"
            label="client_id"
            prop="clientId"
          >
            <el-input v-model="form.clientId" placeholder="请输入client_id" />
          </el-form-item>
          <el-form-item
            v-if="dialogType === 1"
            class="item right"
            label="client_secret"
            prop="clientSecret"
          >
            <el-input
              v-model="form.clientSecret"
              placeholder="请输入client_secret"
            />
          </el-form-item>
          <el-form-item
            v-if="dialogType === 1"
            label="虚拟数据中心"
            prop="vdcId"
          >
            <el-input v-model="form.vdcId" placeholder="请输入虚拟数据中心" />
          </el-form-item>
        </template>
        <el-form-item v-if="dialogType === 1" label="区域信息" prop="region">
          <el-select
            v-model="form.region"
            placeholder="请选择区域信息"
            style="width: 100%"
          >
            <el-option
              v-for="item in regionOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            v-model="form.desc"
            placeholder="请输入描述"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="showDialog = false">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="dialogConfirmLoading"
          @click="dialogConfirmClick"
        >确 定</el-button>
      </div>
    </el-dialog>
  </MyContainer>
</template>

<script>
import pagePermissionMixin from '@/views/mixin/pagePermission.js'
import pageQueryMixin from '@/views/mixin/pageQuery.js'
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import { CLUSTER_PLATFORM, PRIVATE_PROVIDER_AREAS } from '@/utils/constant'
import {
  getPrivateAccountList,
  createPrivateAccount,
  updatePrivateAccount,
  deletePrivateAccount
} from '@/api/cn-mgmt'

// 默认form
const getDefaultForm = () => {
  return {
    cloudPlatform: '',
    cloudAccountName: '',
    userName: '',
    pwd: '',
    serverAddress: '',
    port: '',
    domain: '', // 用户域
    region: '', // 区域信息
    clientId: '', // 浪潮云特有字段
    clientSecret: '', // 浪潮云特有字段
    vdcId: '', // 数据中心 浪潮云特有字段
    desc: ''
  }
}

export default {
  name: 'CNMgmtTokenPrivate',
  components: {
    MyContainer,
    MyHeader,
    MyMain
  },
  mixins: [pagePermissionMixin, pageQueryMixin],
  data() {
    return {
      menuKey: 'CNToken',
      cloudPlatformOptions: CLUSTER_PLATFORM, // 云商选项
      regionOptions: PRIVATE_PROVIDER_AREAS,
      showDialog: false,
      dialogType: 1, // 1-创建 2-编辑
      form: getDefaultForm(), // 表单
      // 校验规则
      rules: {
        cloudPlatform: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cloudAccountName: [
          { required: true, message: '请输入云账户名称', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        serverAddress: [
          { required: true, message: '请输入服务器地址', trigger: 'blur' }
        ]
      },
      dialogConfirmLoading: false // 确定loading
    }
  },
  created() {},
  methods: {
    /**
     * @description: 确定
     * @return {*}
     */
    dialogConfirmClick() {
      // 校验
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          // 合法
          this.dialogConfirmLoading = true
          if (this.dialogType === 1) {
            createPrivateAccount({
              ...this.form
            })
              .then((res) => {
                this.$message.success({
                  message: '创建私有云账号成功！',
                  duration: '2000'
                })
                this.showDialog = false // 取消弹窗
                this.pageNum = 1 // 第一页
                this.getList() // 刷新数据
              })
              .finally(() => {
                this.dialogConfirmLoading = false
              })
          } else if (this.dialogType === 2) {
            updatePrivateAccount({
              cloudAccountName: this.form.cloudAccountName,
              serverAddress: this.form.serverAddress,
              port: this.form.port,
              domain: this.form.domain,
              desc: this.form.desc
            })
              .then((res) => {
                this.$message.success({
                  message: '编辑私有云账号成功！',
                  duration: '2000'
                })
                this.showDialog = false // 取消弹窗
                this.getList() // 刷新数据
              })
              .finally(() => {
                this.dialogConfirmLoading = false
              })
          }
        }
      })
    },
    /**
     * @description: 创建
     * @return {*}
     */
    createClick() {
      this.$refs.form && this.$refs.form.resetFields() // 表单重置
      this.form = getDefaultForm() // 初始化form
      this.dialogType = 1 // 创建弹窗
      this.showDialog = true // 展示
    },
    /**
     * @description: 编辑
     * @param {*} row
     * @return {*}
     */
    editClick(row) {
      this.form = JSON.parse(JSON.stringify(row)) // 获取表单数据
      this.dialogType = 2 // 编辑弹窗
      this.showDialog = true // 展示
    },
    /**
     * @description: 删除
     * @param {*} row
     * @param {*} index
     * @return {*}
     */
    deleteClick(scope) {
      const row = scope.row
      deletePrivateAccount({
        cloudAccountName: row.cloudAccountName
      }).then((res) => {
        scope._self.$refs[`popover-delete-${scope.$index}`].doClose() // 取消popover
        this.$message.success('删除成功')
        if (this.list.length === 1) {
          // 当前页只有一条数据时 删除完刷新上一页数据
          this.pageNum = Math.max(this.pageNum - 1, 1)
        }
        this.getList() // 请求数据
      })
    },
    /**
     * @description: 获取列表
     * @return {*}
     */
    getList() {
      this.handleRequestAndResp(getPrivateAccountList, {
        keyword: this.searchKey,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.container {
  .create-dialog {
    /deep/ .el-dialog {
      min-width: 700px;
    }
    .item {
      display: inline-block;
      width: calc(50% - 7.5px);
      &.right {
        margin-left: 15px;
      }
    }
  }
}
</style>
